<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>

    <link rel="stylesheet" href="../kindeditor/themes/default/default.css"/>
    <link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css"/>
    <script charset="utf-8" src="../kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>

    <script>
        $(function () {
            // 给提交按钮添加单击事件
            $("#add-btn").click(function () {
                // 收集参数
                let title = $("#title").val().trim();
                let column = $("#column").find("option:selected").val();
                let content = editor.html();
                // 表单验证
                if (title == "") {
                    alert("标题不能为空");
                    return;
                }
                if (column == "") {
                    alert("栏目不能为空");
                    return;
                }
                console.log(content);
                // 发送请求
                $.post(
                    '/backstage/article/add',
                    {},
                    function (data) {
                        console.log(data);
                        if (data.code == "1") {
                            //跳转栏目展示列表
                            window.location.href = '/backstage/article/list';
                        } else {
                            //提示信息
                            alert(data.message);
                        }
                    }
                );
            });


            KindEditor.ready(function (K) {
                window.editor = K.create('#editor_id');

                var options = {
                    filterMode: true
                };
                var editor = K.create('textarea[name="content"]', options);
                // 取得HTML内容
                html = editor.html();
            });
        })
    </script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head">
        <strong><span class="icon-key"></span>添加文章</strong>
    </div>
    <div class="body-content">
        <form class="form-x">
            <div class="form-group">
                <div class="label">
                    <label>标题：</label>
                </div>
                <div class="field">
                    <input id="title" type="text" class="input w50" placeholder="请输入标题名"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>栏目：</label>
                </div>
                <div class="field">
                    <select id="column" class="input w50">
                        <option value="">请选择栏目</option>
                        <option value="1">栏目1</option>
                        <option value="2">栏目2</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>内容</label>
                </div>
                <div class="field">
                    <textarea id="editor_id" name="content"
                              style="width:800px;height:400px;visibility:hidden;"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button id="add-btn" class="button bg-main icon-check-square-o" type="button"> 提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>